<template>
  <div class="collect-material">
    <div class="material-product-title">我的素材</div>
    <!-- 搜索栏 -->
    <div class="material-product-search">
      <div class="material-product-search-input">
        <el-input
          placeholder="请输入关键词、名称、编号"
          suffix-icon="el-icon-search"
          v-model="keyword"
          @keyup.enter.native="getCollectMaterialList"
        >
        </el-input>
      </div>
      <div class="material-product-search-time">
        <el-date-picker
          v-model="timeData"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="material-product-search-submit">
        <el-button type="primary" @click="getCollectMaterialList"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="collect-material-bottom">
      <el-button type="primary" @click="isCollectFolderShow = true"
        >新增文件夹</el-button
      >
      <el-button
        type="success"
        :disabled="isTransferShow"
        @click="isCollectTransferShow = true"
        >转移</el-button
      >
      <el-button type="warning" @click="onMaterialBatchDel">批量删除</el-button>
    </div>
    <!-- 选择/排序标准 -->
    <div class="collect-material-all-sort">
      <div class="collect-material-all">
        <div class="collect-material-all-name">全部素材</div>
        <div class="collect-material-all-checkbox">
          <el-checkbox v-model="materialCheckAll" @change="onMaterialChangeAll"
            >全选</el-checkbox
          >
        </div>
      </div>
      <div class="collect-material-sort">
        <div
          class="collect-material-sort-issue"
          v-for="(itemData, dataIdx) in materialTabData"
          :key="dataIdx"
          @click="onMaterialTab(itemData)"
        >
          {{ itemData.title }}
          <!-- <i class="el-icon-d-caret"></i> -->
          <div class="icon-caret">
            <i
              :class="[
                'el-icon-caret-top',
                itemData.order == order && op == 'a' ? 'icon-caret-active' : '',
              ]"
            ></i>
            <i
              :class="[
                'el-icon-caret-bottom',
                itemData.order == order && op == 'b' ? 'icon-caret-active' : '',
              ]"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 主要内容 -->
    <div class="collect-material-content">
      <template v-if="fileId == -1">
        <div
          class="collect-material-content-list"
          v-for="(material, index) in materialListValue"
          :key="material.id + material.title"
        >
          <div
            class="collect-material-content-list-file"
            @click="onCollectIsshowValue(material, index)"
          >
            <img
              class="image-align-center"
              src="@/assets/images/files.png"
              alt=""
            />
            <el-checkbox
              class="checkbox"
              v-model="material.isShow"
            ></el-checkbox>
            <!-- <img class="image-100" :src="item.pic" alt="" /> -->
          </div>
          <div class="collect-material-content-list-name">
            {{ material.title }}
          </div>
        </div>
      </template>
      <div
        class="collect-material-content-list"
        v-for="(item, idx) in materialData"
        :key="item.id"
      >
        <div
          class="collect-material-content-list-file"
          @click="onCollectIsshow(item, idx)"
        >
          <img class="image-100" :src="item.pic" alt="" />
          <el-checkbox class="checkbox" v-model="item.isShow"></el-checkbox>
        </div>
        <div class="collect-material-content-list-name">
          {{ item.file_title }}
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="collect-material-pagination">
      <el-pagination
        @size-change="materialSizeChange"
        @current-change="materialCurrentChange"
        :current-page="page"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="materialTotal"
      >
      </el-pagination>
    </div>

    <!-- 转移 -->
    <div class="collect-transfer">
      <el-dialog
        title="移动到"
        :visible.sync="isCollectTransferShow"
        :close-on-click-modal="false"
        width="40%"
      >
        <div class="collect-transfer-box">
          <el-menu unique-opened class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-folder-opened"></i>
                <span>全部文件</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="material.title"
                  v-for="(material, index) in materialList"
                  :key="index"
                  @click="onTransferTab(material)"
                >
                  <i class="el-icon-folder"></i>
                  {{ material.title }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isCollectTransferShow = false">取 消</el-button>
          <el-button type="primary" @click="onTransferConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 新增文件夹 -->
    <div class="collect-folder">
      <el-dialog
        title="新建文件夹"
        :visible.sync="isCollectFolderShow"
        :close-on-click-modal="false"
        width="30%"
      >
        <div class="collect-folder-input">
          <span>文件夹名称</span>
          <el-input
            placeholder="请输入文件夹名称"
            v-model="folderValue"
            clearable
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isCollectFolderShow = false">取 消</el-button>
          <el-button type="primary" @click="onPostAddFolder">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Collect from '@/api/collect';
import Way from '@/utils/way';

export default {
  name: 'CollectMaterial',
  components: {},
  props: {
    materialList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    fileId: {
      type: Number,
      default: () => {
        return -1;
      },
    },
  },
  data() {
    return {
      keyword: '', // 关键词搜索
      timeData: [], // 时间
      // 是否全选
      materialCheckAll: false,
      page: 1, // 当前页数
      pageSize: 10, // 每页数量
      materialTabData: [
        {
          title: '出单数',
          order: 'design_num',
        },
        {
          title: '加入时间',
          order: 'created_at',
        },
        {
          title: '图片大小',
          order: 'size',
        },
      ], // 出单数/加入时间等选择
      materialListValue: [],
      materialData: [], // 素材数据列表
      materialTotal: 0, // 素材数据总数
      order: '', // 排序
      op: '', // 排序方式
      isCollectFolderShow: false, // 新增文件夹
      isCollectTransferShow: false, // 转移
      folderValue: '', // 文件夹名称
      isTransferShow: true, // 是否可以转移
      transferFileId: '', // 转移文件选择的id
    };
  },
  computed: {
    // 时间快捷选择
    pickerOptions() {
      return this.$store.state.layout.pickerOptions;
    },
  },
  watch: {
    materialList(val) {
      this.materialListValue = val;
    },
  },
  created() {
    this.getCollectMaterialList();
  },
  methods: {
    materialSizeChange(val) {},
    materialCurrentChange(val) {},
    // 获取素材列表
    getCollectMaterialList() {
      const that = this;
      const param = {
        page: 1,
        limit: 20,
        keyword: that.keyword,
        folder_id: that.fileId == -1 ? '' : that.fileId,
        order: that.order,
        op: that.op,
        start_time: that.timeData[0],
        end_time: that.timeData[1],
        update_start_time: '',
        update_end_time: '',
      };
      Collect.getCollectMaterialList(param).then((res) => {
        console.log(res);
        const rows = res.data.rows;
        rows.forEach((oj) => {
          oj.isShow = false;
        });
        if (res.code == 200) {
          that.materialData = res.data.rows;
          that.materialTotal = res.data.total;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 出单时间/图片大小等事件
    onMaterialTab(item) {
      if (this.order == item.order) {
        if (this.op == 'a') {
          this.op = 'b';
        } else if (this.op == 'b') {
          this.op = '';
          this.order = '';
        }
      } else {
        this.op = 'a';
        this.order = item.order;
      }
      console.log(item);
      this.getCollectMaterialList();
    },

    // 新建文件夹
    onPostAddFolder() {
      const that = this;
      const folderValue = that.folderValue;
      Collect.postAddFolder({ folder_name: folderValue }).then((res) => {
        if (res.code == 200) {
          Way.setMessage('新建文件夹成功', 1);
          that.isCollectFolderShow = false;
          that.$parent.getMaterialFolder();
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 选择素材
    onCollectIsshow(item, idx) {
      this.materialData[idx].isShow = !item.isShow;
      this.setCollectisShow();
      this.isTransferShow = !this.materialData.some((oj) => oj.isShow == true);
    },

    // 设置是否全选
    setCollectisShow() {
      const materialListValue = this.materialListValue;
      const materialData = this.materialData;
      if (this.fileId == -1) {
        const list = materialListValue.concat(materialData);
        this.materialCheckAll = list.some((ok) => ok.isShow == false)
          ? false
          : true;
      } else {
        this.materialCheckAll = this.materialData.some(
          (ok) => ok.isShow == false
        )
          ? false
          : true;
      }
    },

    // 选择文件夹
    onCollectIsshowValue(material, index) {
      this.materialListValue[index].isShow = !material.isShow;
      this.setCollectisShow();
    },

    // 批量删除
    onMaterialBatchDel() {
      const that = this;
      const materialData = that.materialData.filter((oj) => oj.isShow == true);
      const materialListValue = that.materialListValue.filter(
        (ol) => ol.isShow == true
      );
      let materialParent = [],
        material = [];
      if (that.fileId == -1) {
        if (materialListValue.length) {
          materialListValue.forEach((oi) => {
            if (oi.isShow) {
              materialParent.push(oi.id);
            }
          });
        }
      }
      if (materialData.length) {
        materialData.forEach((op) => {
          if (op.isShow) {
            material.push(op.id);
          }
        });

        Collect.delMaterial({ ids: material }).then((res) => {
          console.log(res);
          if (res.code == 200) {
            Way.setMessage('删除素材成功', 1);
            for (const i in material) {
              let delIndex = that.materialData.findIndex(
                (oi) => oi.id == material[i]
              );
              that.materialData.splice(delIndex, 1);
            }
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
      }
    },

    // 全选事件
    onMaterialChangeAll(isShow) {
      if (isShow) {
        this.fileId == -1 &&
          this.materialListValue.forEach((oj) => (oj.isShow = true));
        this.materialData.forEach((oj) => (oj.isShow = true));
      } else {
        this.fileId == -1 &&
          this.materialListValue.forEach((oj) => (oj.isShow = false));
        this.materialData.forEach((oj) => (oj.isShow = false));
      }
    },

    // 转移选择文件点击事件
    onTransferTab(item) {
      this.transferFileId = item.id;
    },

    // 转移文件确定按钮
    onTransferConfirm() {
      const that = this;
      const fid = this.transferFileId;
      const materialData = this.materialData.filter((oj) => oj.isShow == true);
      let ids = [];
      materialData.forEach((ol) => {
        ids.push(ol.id);
      });
      Collect.postMaterialBathMove({ fid, ids }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          Way.setMessage('转移成功', 1);
          that.isCollectTransferShow = false;
          that.setCheckoutEmpty();
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 清空复选框
    setCheckoutEmpty() {
      this.materialCheckAll = false;
      this.isTransferShow = true;
      this.materialListValue.forEach((op) => {
        op.isShow = false;
      });
      this.materialData.forEach((io) => {
        io.isShow = false;
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/collect-material-product.less';
.collect-material {
  // 操作按钮
  .collect-material-bottom {
    padding-top: 24px;
  }

  // 选择/排序标准
  .collect-material-all-sort {
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .collect-material-all {
      display: flex;
      .collect-material-all-checkbox {
        padding-left: 24px;
      }
    }

    .collect-material-sort {
      display: flex;

      .collect-material-sort-issue {
        display: flex;
        padding-left: 24px;
        cursor: pointer;

        .icon-caret {
          display: flex;
          flex-direction: column;

          .el-icon-caret-top {
            margin-bottom: -3px;
          }

          .el-icon-caret-bottom {
            margin-top: -5px;
          }

          .icon-caret-active {
            color: #4181ff;
          }
        }
      }
    }
  }

  // 主要内容
  .collect-material-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;

    .collect-material-content-list {
      width: 178px;
      margin-right: 24px;
      margin-bottom: 24px;

      .collect-material-content-list-file {
        // padding: 12px;
        position: relative;
        height: 188px;
        cursor: pointer;

        .checkbox {
          position: absolute;
          left: 10px;
          top: 10px;
        }
      }
      .collect-material-content-list-name {
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
      }
    }

    .collect-material-content-list:nth-child(5n) {
      margin-right: unset;
    }
  }

  // 分页
  .collect-material-pagination {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }
}

// 转移
.collect-transfer {
  .collect-transfer-box {
    height: 400px;

    .el-menu-vertical-demo {
      height: 400px;
      overflow-y: auto;
    }
  }
}

// 新增文件夹
.collect-folder {
  .collect-folder-input {
    display: flex;
    align-items: center;

    span {
      padding-right: 10px;
    }

    .el-input {
      flex: 1;
    }
  }
}
</style>
